<!DOCTYPE html>
<html>
  <!-- Html Head Tag-->
  <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="Rms">
  <!-- Open Graph Data -->
  <meta property="og:title" content="使用Vue输出Hello Vue"/>
  <meta property="og:description" content="" />
  <meta property="og:site_name" content="帅的一逼"/>
  <meta property="og:type" content="article" />
  <meta property="og:image" content="http://shsa.gitee.io"/>
  
    <link rel="alternate" href="/atom.xml" title="帅的一逼" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  

  <!-- Site Title -->
  <title>帅的一逼</title>

  <!-- Bootstrap CSS -->
  
<link rel="stylesheet" href="/myblog/css/bootstrap.min.css">

  <!-- Custom CSS -->
  
  
<link rel="stylesheet" href="/myblog/css/style.light.css">


  <!-- Google Analytics -->
  

<meta name="generator" content="Hexo 4.2.1"></head>

  <body>
    <!-- Page Header -->


<header class="site-header header-background" style="background-image: url(/myblog//img/i.jpg)">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
        <div class="page-title with-background-image">
          <p class="title">使用Vue输出Hello Vue</p>
          <p class="subtitle"></p>
        </div>
        <div class="site-menu with-background-image">
          <ul>
            
              <li>
                <a href="/myblog/">
                  
                  Home
                  
                </a>
              </li>
            
              <li>
                <a href="/myblog/archives">
                  
                  Archives
                  
                </a>
              </li>
            
              <li>
                <a href="/myblog/about">
                  
                  About
                  
                </a>
              </li>
            
          </ul>
        </div>
      </div>
    </div>
  </div>
</header>

<article>
  <div class="container typo">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
        <div class="post-info text-muted">
          
            <!-- Author -->
            <span class="author info">By Rms</span>
          
          <!-- Date -->
          <span class="date-time info">On
            <span class="date">2020-06-29</span>
            <span class="time">21:53:53</span>
          </span>
          
        </div>
        <!-- Tags -->
        
        <!-- Post Main Content -->
        <div class="post-content">
          <h1 id="vue快速入门"><a href="#vue快速入门" class="headerlink" title="vue快速入门"></a>vue快速入门</h1><h3 id="一、什么是-Vue"><a href="#一、什么是-Vue" class="headerlink" title="一、什么是 Vue"></a><strong>一、什么是</strong> <strong>Vue</strong></h3><p><strong>1.**</strong>简介**</p>
<p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的<strong>渐进式的**</strong>js<strong>**框架</strong>，发布于 2014 年 2 月。与其它大型框</p>
<p>架不同的是，Vue 被设计为可以自底向上逐层应用。<strong>Vue</strong> <strong>的核心库只关注视图层</strong>，不仅易于上手，还便于与第三方</p>
<p>库（如： vue-router ， vue-resource ， vuex ）或既有项目整合。 MVC</p>
<p>2.MVVM** <strong>模式的实现者**</strong>——双向数据绑定模式</p>
<p>Model：模型层，在这里表示 JavaScript 对象</p>
<p>View：视图层，在这里表示 DOM（HTML 操作的元素）</p>
<p>ViewModel：连接视图和数据的中间件，<strong>Vue.js</strong> <strong>就是</strong> <strong>MVVM</strong> <strong>中的</strong> <strong>ViewModel</strong> <strong>层的实现者</strong></p>
<p><img src="https://pic.baixiongz.com/2020/06/29/9ecbfa9699013.png" alt="clipboard"></p>
<p>在 MVVM 架构中，是不允许 <strong>数据</strong> 和 <strong>视图</strong> 直接通信的，只能通过 ViewModel 来通信，而 ViewModel 就是定义了</p>
<p>一个 Observer 观察者</p>
<p>ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新</p>
<p>ViewModel 能够监听到视图的变化，并能够通知数据发生改变</p>
<p>至此，我们就明白了，Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听 与 数据绑定</p>
<p><strong>3.**</strong>其它** <strong>MVVM</strong> <strong>实现者</strong></p>
<p>AngularJS</p>
<p>ReactJS</p>
<p>微信小程序</p>
<p><strong>4.**</strong>为什么要使用** <strong>Vue.js</strong></p>
<p>轻量级，体积小是一个重要指标。Vue.js 压缩后有只有 <strong>20**</strong>多<strong>**kb</strong> （Angular 压缩后 <strong>56kb+</strong>，React 压缩后</p>
<p><strong>44kb+</strong>）移动优先。更适合移动端，比如移动端的 Touch 事件</p>
<p>易上手，学习曲线平稳，文档齐全</p>
<p>吸取了 Angular（ 模块化 ）和 React（ 虚拟 DOM ）的长处，并拥有自己独特的功能，如： 计算属性</p>
<p>开源，社区活跃度高</p>
<h4 id="vue-js的两大核心"><a href="#vue-js的两大核心" class="headerlink" title="vue.js的两大核心"></a>vue.js的两大核心</h4><h6 id="1-数据驱动，也就是数据的双向绑定"><a href="#1-数据驱动，也就是数据的双向绑定" class="headerlink" title="1. 数据驱动，也就是数据的双向绑定"></a>1. 数据驱动，也就是数据的双向绑定</h6><p>Vue 响应式核心就是，getter 的时候会收集依赖，setter 的时候会触发依赖更新</p>
<p>vue将遍历data中对象的所有property，并使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty" target="_blank" rel="noopener"><code>Object.defineProperty</code></a> 把这些 property 全部转为 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#定义_getters_与_setters" target="_blank" rel="noopener">getter/setter</a>。</p>
<p>这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。</p>
<p>每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。</p>
<p>getter 的时候我们会收集依赖，依赖收集就是订阅数据变化watcher的收集，依赖收集的目的是当响应式数据发生变化时，能够通知相应的订阅者去处理相关的逻辑。</p>
<p>setter 的时候会触发依赖更新，之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。</p>
<h6 id="2-组件系统"><a href="#2-组件系统" class="headerlink" title="2. 组件系统"></a>2. 组件系统</h6><p>组件的核心选项</p>
<p>1 模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。</p>
<p>2 初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。</p>
<p>3 接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。</p>
<p>4 方法（methods）：对数据的改动操作一般都在组件的方法内进行。</p>
<p>5 生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，最新2.0版本对于生命周期函数名称改动很大。</p>
<p>6 私有资源（assets）：Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。</p>
<h3 id="二-使用vue输出Hello-Vue"><a href="#二-使用vue输出Hello-Vue" class="headerlink" title="二.使用vue输出Hello  Vue"></a>二.使用vue输出Hello  Vue</h3><ol>
<li><p>新建一个html文件，在页面中引用以下语句:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>版本问题可以去<a href="https://www.bootcdn.cn/" target="_blank" rel="noopener">https://www.bootcdn.cn/</a></p>
</li>
<li><p>在页面中绑定vue元素</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>创建vue对象,编辑对象内容</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    /*</span><br><span class="line">     * 创建了一个vm的vue对象</span><br><span class="line">     * el:element的缩写  元素  就是vue作用的范围</span><br><span class="line">     * data: 就是vue的数据  键值对   类似json数据</span><br><span class="line">     * 可以通过插值表达式进行绑定</span><br><span class="line">     *</span><br><span class="line">     * */</span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm=<span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">        el:<span class="string">'#app'</span>, <span class="comment">/*千万别忘记   ‘’别搞错*/</span></span></span><br><span class="line">        data:&#123;</span><br><span class="line"><span class="actionscript">            message:<span class="string">'Hello Vue'</span>,</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>在页面的元素中使用插值表达式来使用vue对象中的内容</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id&#x3D;&quot;app&quot;&gt;</span><br><span class="line">&#123;&#123;message&#125;&#125;  用于获取vm对象中message属性的值</span><br><span class="line">&lt;&#x2F;div&gt;</span><br></pre></td></tr></table></figure>

</li>
</ol>

        </div>
      </div>
    </div>
  </div>
</article>



    <!-- Footer -->
<footer>
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
        <p class="copyright text-muted">
          Theme By <a target="_blank" href="https://github.com/levblanc">Levblanc.</a>
          Inspired By <a target="_blank" href="https://github.com/klugjo/hexo-theme-clean-blog">Clean Blog.</a>
        <p class="copyright text-muted">
          Powered By <a target="_blank" href="https://hexo.io/">Hexo.</a>
        </p>
      </div>
    </div>
  </div>
</footer>


    <!-- After Footer Scripts -->

<script src="/myblog/js/highlight.pack.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var codeBlocks = Array.prototype.slice.call(document.getElementsByTagName('pre'))
    codeBlocks.forEach(function(block, index) {
      hljs.highlightBlock(block);
    });
  });
</script>

  </body>
</html>

